<template>
    <div>
        <div class="layout-content-breadcrumb">
            <Breadcrumb>
                <Breadcrumb-item>投诉管理</Breadcrumb-item>
                <Breadcrumb-item>投诉详情</Breadcrumb-item>
            </Breadcrumb>
        </div>
        <div class="page-content">
            <div class="title">投诉人信息：</div>
            <Row type="flex" :gutter="16">
                <Col span="18">
                <Row type="flex" :gutter="16">
                    <Col span="8">
                    <span class="label1">投诉人:</span>{{model.complainant}}
                </Col>
                    <Col span="8">
                    <span class="label1">身份证:</span>{{model.complaint_ID}}
                </Col>
                    <Col span="8">
                    <span class="label1">投诉电话:</span>{{model.contact_phone}}
                </Col>
                </Row>
            <Row type="flex" :gutter="16">
                <Col span="24">
                <span class="label1">当前状态:</span>{{model.statusName}}
                </Col>
            </Row>
            <Row type="flex" :gutter="16">
                <Col span="24">
                <span class="label1">投诉时间:</span>{{model.created_at}}
                </Col>
            </Row>
            <Row type="flex" :gutter="16">
                <Col span="24">
                <span class="label1">投诉内容:</span>{{model.complaint_content}}
                </Col>
            </Row>
                </Col>
            </Row>

<div class="title">投诉对象信息：</div>
            <Row type="flex" :gutter="16">
                <Col span="18">
            <Row type="flex" :gutter="16">
                <Col span="8">
                <span class="label1">投诉对象:</span>{{model.complaint_target}}
                </Col>
                <Col span="8">
                <span class="label1">联系方式:</span>{{model.complaint_target_phone}}
                </Col>
                <Col span="8">
                <span class="label1">联系人:</span>{{model.complaint_target_contacter}}
                </Col>
            </Row>
                </Col>
            </Row>
            <div class="title">回复列表：</div>
            <Row type="flex" :gutter="16">
                <Col span="18">
                <Table :columns="columns" :data="dataSource"></Table>
                </Col>
            </Row>
            <div class="title">我要回复：</div>
            <Row type="flex" :gutter="16">
                <Col span="18">
                <span class="label1">回复内容:</span>
                <Input type="textarea" :rows="5" v-model="replyContent" placeholder="请输入回复内容" size="large">
                </Input>
                <div style="text-align: right;margin-top: 10px;">
                    <Button type="primary" @click="onReply">回复</Button>
                </div>
                </Col>
            </Row>
        </div>
    </div>
</template>
<style lang="less" scoped>
    .title{
        font-size:16px;
        font-weight:bold;
        margin: 8px 0 0;
    }
    .ivu-row-flex{
        margin-top: 10px;
    }
    .label1{
        margin-right:12px;
    }
</style>
<script>
    import api from 'service/complaint'
    export default{
        data(){
            return {
                replyContent:'',
                model: {},
                statusMap: {
                    '0': '未受理',
                    '1': '受理',
                    '2': '调解',
                    '3': '完成'
                },
                columns: [
                    {
                        title: '服务人员',
                        key: 'name'
                    },
                    {
                        title: '回复内容',
                        key: 'content'
                    },
                    {
                        title: '回复时间',
                        key: 'time'
                    }
                ],
                dataSource: []
            }
        },
        mounted(){
            this.getDetail()
        },
        methods: {
            getDetail(){
                api.getDetail({id: this.$route.params.id})
                    .then(({data}) => {
                        data.statusName = this.statusMap[data.status]
                        this.model = data
                        this.dataSource = (data.deal_suggestion || []).map(item => {
                            return {
                                name: item.server.nick,
                                content: item.deal_suggestion,
                                time: item.created_at
                            }
                        })
                    })
            },
            onReply(){
                let content = this.replyContent.trim()
                if (!content) {
                    return this.$Message.warning('请输入回复内容')
                }
                api.replyComplaint({
                    id: this.$route.params.id,
                    deal_suggestion: content
                }).then(() => {
                    this.$Message.success('回复成功！')
                    this.replyContent=''
                    this.getDetail()
                })
            }
        }
    }
</script>